<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 基本使用</title>
</head>
<body>
<div id="app">
    <h1>{{ counter }}</h1>
    <div>直接修改数据</div>
    <button v-on:click="counter--">-</button>
    <button v-on:click="counter++">+</button>

    <br>
    <div>在函数中修改</div>
    <button v-on:click="decrease">-</button>
    <button v-on:click="increase">+</button>


    <br>
    <div>使用语法糖写法</div>
    <button @click="decrease">-</button>
    <button @click="increase">+</button>
</div>
<script src="../../../../../js/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0,
            }
        },

        methods: {
            increase() {
                this.counter++
            },
            decrease() {
                if (this.counter > 0) {
                    this.counter--
                }
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>